<script setup>
import { ref, reactive } from 'vue'
import useFormEvent from '@/core/hooks/useFormEvent'
// import { isDef } from '@/core/utils/Common'
import configApi from '@/api/system/ConfigApi'
//import { cloneDeep } from 'lodash-es'
const formRef = ref() // 表单ID
const state = reactive({
  visible: false,
  loading: false, // 加载开关
  //editableData: {}
})
// 表单结构
const original = {
  id: '',
  code: '',
  name: '',
  type: 'single',
  value: '',
  notes: '',
  values: []
}
// 表单数据
const formState = reactive({})
// 表单 处理
const {
  onCancel, InitializeData, onFinish
} = useFormEvent({ state: state, remoteApi: configApi, formState: formState, original: original, formRef: formRef })

//向父组件暴露方法和属性
defineExpose({ InitializeData })
/*====权限列表相关=======================*/
// 定义列表字段
// const columns = [
//   { title: '文本', dataIndex: 'label'},
//   { title: '值', dataIndex: 'value' },
//   { title: '排序', dataIndex: 'idx' },
//   { title: '操作', dataIndex: 'operation', width: '100px' },
// ]
// const edit = key => {
//   state.editableData[key] = cloneDeep(formState.values.filter(item => key === item.id)[0])
// }
// const save = key => {
//   Object.assign(formState.values.filter(item => key === item.id)[0], state.editableData[key])
//   delete state.editableData[key]
// }
// const cancel = key => {
//   delete state.editableData[key]
// }
//
const addItem =() =>{
  let key = new Date().getTime()
  formState.values.push({id: key , label: '', value: '', idx: 0})
  // state.editableData[key] = cloneDeep(formState.values.filter(item => key === item.id)[0])
}
//
const remove = item =>{
  formState.values = formState.values.filter(it=> it!=item)
}
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`字典信息`"
    placement="right"
    :width="'70%'"
  >
    <a-card hoverable>
      <a-spin :spinning="state.loading">
        <!-- 表单内容 begin -->
        <a-form
          ref="formRef"
          :model="formState"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 10}"
          :scroll-to-first-error="true"
          :validate-on-rule-change="false"
          @finish="onFinish"
        >
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="标识" name="code" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入标识!' }]"
              >
                <a-input
                  v-model:value="formState.code" show-count :minlength="5" :maxlength="20" allow-clear
                  placeholder="必须是唯一" :disabled="formState.id!=''" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="名称" name="name" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入名称!' }]">
                <a-input v-model:value="formState.name" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="类型" name="type" :label-col="{span:3}" :rules="[{ required: true, message: '请输入类型!' }]">
                <a-radio-group v-model:value="formState.type" button-style="solid">
                  <a-radio-button value="single">单项值</a-radio-button>
                  <a-radio-button value="list">列表值</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col v-if="formState.type=='single'" :span="24">
              <a-form-item
                label="单项值" name="value" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入单项值!' }]">
                <a-input v-model:value="formState.value" show-count :minlength="2" :maxlength="20" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="备注" name="notes" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                <a-textarea v-model:value="formState.notes" show-count />
              </a-form-item>
            </a-col>
            <a-col v-if="formState.type=='list'" :span="24">
              <a-form-item
                label="列表值" name="values" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                <a-row :gutter="16" style="background-color: antiquewhite;padding: 5px;margin-bottom: 10px;">
                  <a-col :span="7"> 文本 </a-col>
                  <a-col :span="7"> 值 </a-col>
                  <a-col :span="7"> 排序 </a-col>
                  <a-col :span="3">
                    <a-button type="dashed" danger ghost size="small" @click="addItem">增加</a-button>
                  </a-col>
                </a-row>
                <a-row v-for="(item, index) in formState.values" :key="index" :gutter="16">
                  <a-col :span="7">
                    <a-form-item label="" :name="['values', index, 'label']" :rules="[{ required: true, message: '请输入文本!' }]">
                      <a-input v-model:value="item.label" />        
                    </a-form-item>
                  </a-col>
                  <a-col :span="7">
                    <a-form-item label="" :name="['values', index, 'value']" :rules="[{ required: true, message: '请输入值!' }]">
                      <a-input v-model:value="item.value" />        
                    </a-form-item>
                  </a-col>
                  <a-col :span="7">
                    <a-form-item label="" :name="['values', index, 'idx']" :rules="[{ required: true, message: '请输入排序!' }]">
                      <a-input-number v-model:value="item.idx" :min="0" :max="100" />        
                    </a-form-item>
                  </a-col>
                  <a-col :span="3">
                    <a-popconfirm title="确定要移去吗?" @confirm="remove(item)">
                      <a-button type="dashed"><delete-outlined /></a-button>
                    </a-popconfirm>
                  </a-col>
                </a-row>
                <a-row :gutter="16">
                  <a-col :span="24"><a-button type="dashed" danger block size="small" @click="addItem">增加新项</a-button></a-col>
                </a-row>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="id">
                <a-space wrap>
                  <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                  <a-button size="large" block @click="onCancel">取消</a-button>
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-card>
  </a-drawer>
</template>